<template lang="html">
  <div class="ser_con2" :class="{ 'flagk-active': flag}">
    <img src="../../static/imgs/left2.png" alt="" @click="back()">
    <div class="telS2">
       <img src="../../static/imgs/tel2.png" alt="">
  			<img src="../../static/imgs/share2.png" alt="">
    </div>
    <div class="flag2" >
      <h1>12222222222222222222222222222222</h1>
    </div>

	</div>
</template>
<script>
export default {
  data(){
    return{
      flag:false,
      scroll:'',
      url:''
    }
  },
  methods: {
     menu() {
      this.scroll = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
      if (this.scroll > window.screen.availHeight/3) {
        this.flag = true
      }else {
        this.flag = false
      }
    },
    back(){
      history.back()
    }
  },
  mounted() {
   window.addEventListener('scroll', this.menu)
 }

}
</script>

<style lang="css">
.flagk-active{
  background-color: #00b0ec;
}
.ser_con2 {
    position: fixed;
    padding: 3% 3% 2%;
    width: 100%;
    overflow: hidden;
    z-index: 99;
}
.telS2{
  display: inline-block;
  float: right;
}
.telS2 img:last-child{
  margin-left: 0.5rem;
}
</style>
<style scoped>
  .flag2{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 1000rem;
    background: red;
  }
</style>
